<script setup>
import {ref, onMounted, reactive, onUpdated, defineProps, computed} from "vue";
import {useRouter, useRoute} from "vue-router";
import {removeToken} from "../../utils/auth";
import {useCounterStore} from "../../pina/index";
import resetPwd from "./components/resetPwd.vue";
import {jihuoma} from "../../api/index";
import {h} from "vue";
import {ElNotification} from "element-plus";
import userInfo from "./components/userInfo.vue";
const store = useCounterStore();
const prop = defineProps({
  msg: String,
  bac: {default: false},
});
const router = useRouter();

const handleSelect = (e) => {
  console.log(e);
  router.push({
    name: `${e}`,
  });
};

// 一个计算属性 ref

const user = computed(() => {
  return store.user;
});

const rules = reactive({
  activateCode: [{required: true, message: "激活码不能为空", trigger: "blur"}],
});
const activeIndex2 = ref("shop");
const jform = reactive({
  activateCode: null,
  userName: user.value.userName,
});
const tui = () => {
  router.push({
    name: `login`,
  });
  removeToken();
  store.incrementUser("");
};
const activeTab = ref("userinfo");
const formx = ref();
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      jihuoma(jform).then((res) => {
        if (res.code == 200) {
          dialogVisibles.value = false;
          ElNotification({
            title: "激活vip",
            message: h("i", {style: "color: teal"}, "激活成功！"),
          });
        }
      });
      console.log(user.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};

const jihuo = () => {
  dialogVisibles.value = true;
};

const dialogVisibles = ref(false);
const dialogVisible = ref(false);
</script>
<template>
  <div style="">
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="500"
      :before-close="handleClose"
    >
      <template #header>
        <div class="my-header">
          <h4 style="font-size: 18px; text-align: center; margin-bottom: 20px">
            个人中心
          </h4>
        </div>
      </template>

      <div class="clearfix">
        <!-- <span>基本资料</span> -->
      </div>
      <div style="">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本资料" name="userinfo">
            <template #label>
              <span style="font-size: 14px; font-weight: 700">基本资料</span>
            </template>
            <el-divider />
            <userInfo style="margin-top: 20px" :user="user" />
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="resetPwd">
            <el-divider />
            <resetPwd style="margin-top: 20px" />
            <template #label>
              <span style="font-size: 14px; font-weight: 700">修改密码</span>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>

      <template #footer>
        <div class="dialog-footer"></div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="dialogVisibles"
      title="vip"
      width="500"
      :before-close="handleClose"
    >
      <template #header>
        <div class="my-header">
          <h4 style="font-size: 18px; text-align: center; margin-bottom: 20px">
            vip激活
          </h4>
        </div>
      </template>

      <el-form
        label-position="top"
        ref="formx"
        :model="jform"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="手机号码" prop="activateCode">
          <template #label>
            <span style="font-size: 12px; font-weight: 700; color: #000"
              >激活码 <i class="el-icon-question"></i
            ></span>
          </template>
          <el-input v-model="jform.activateCode" />
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button
          type="primary"
          size="mini"
          @click="submitForm(formx)"
          round
          color="rgb(78 168 185)"
          style="width: 80px; color: #fff; margin-bottom: 20px; font-size: 12px"
          >激活</el-button
        >
      </div>
      <template #footer>
        <div class="dialog-footer"></div>
      </template>
    </el-dialog>

    <div style="margin-top: 20px">
      <el-dropdown trigger="click">
        <span
          style="
            cursor: pointer;
            color: #afa8a8;
            display: flex;
            align-items: center;
          "
        >
          <el-icon
            color="
            
            "
            style="font-size: 24px; margin-right: 5px"
            ><Avatar
          /></el-icon>

          {{ user.userName }}</span
        >
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <div
                @click="dialogVisible = true"
                style="
                  height: 80px;
                  padding: 10px;
                  color: aliceblue;
                  border-radius: 5px;
                  top: -5px;
                  background-color: rgb(78, 168, 185);
                  width: 200px;
                  text-align: center;
                "
              >
                <el-icon
                  color="
            
            "
                  style="font-size: 30px"
                  ><Avatar
                /></el-icon>
                <br />
                {{ user.phonenumber }}
              </div>
            </el-dropdown-item>
            <el-dropdown-item
              ><p style="margin: 10px; text-align: center; width: 100%"></p
            ></el-dropdown-item>
            <el-dropdown-item
              ><p style="margin: 10px; text-align: center; width: 100%">
                <el-button
                  type="info"
                  round
                  plain
                  style="font-weight: 700"
                  @click="jihuo"
                  >激活码</el-button
                >
                <el-button
                  type="info"
                  round
                  plain
                  style="font-weight: 700"
                  @click="tui"
                  >退出登录</el-button
                >
              </p></el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header {
  box-shadow: 0 2px 10px #8892965e;
  /* position: absolute; */
  /* background-color:rgba(255,255,255,.5); */
  /* position: absolute;  */
  width: 100%;
  z-index: 99999;
  display: flex;
  justify-content: flex-end;
  /* flex-direction: row-reverse; */
  padding: 0px 30px;
  /* background-color: rgb(0, 0, 0,.2); */
}
.lianright {
  width: 60%;
  height: 400px;
  background-color: red;
}
.lianxiang {
  margin-top: 30px;
}
.lianxiang li {
  font-size: 18px;
  line-height: 50px;
  color: rgb(102, 102, 102);
}
.fandh {
  font-size: 24px;
  font-weight: 700;
  color: rgb(127, 127, 127);
}
.sdsda {
  font-size: 16px !important;
}
.lianty {
  text-align: center;
  font: 15px/140% Arial, "宋体", Helvetica, sans-serif, Verdana;
  color: #5a5a5a;
}
.boleft {
  width: 40%;
  height: 400px;
  padding: 20px;
}
.lianxi {
  display: flex;

  width: 1200px;
  margin: auto;
  margin-top: 20px;
  border: 1px solid rgb(243, 243, 243);

  background-color: rgb(251, 251, 251);
}
:deep(.el-dialog) {
  border-radius: 10px;
}
.bm-view {
  width: 100%;

  height: 100%;
}
.el-dropdown-menu {
  padding: 0 !important;
}
:deep(.el-dropdown-menu__item) {
  padding: 0;
}

:deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__item.is-active) {
  color: rgb(78 168 185);
}
:deep(.el-tabs__active-bar) {
  background-color: rgb(78 168 185) !important;
}
:deep(.el-tabs__item:hover) {
  color: rgb(78 168 185);
}

.xiangc {
  background-color: rgb(251, 251, 251);
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}
.xiangc li {
  cursor: pointer;
  width: 20%;
  height: 200px;
}
.xiangc li img {
  width: 100%;
  height: 80%;
  transition: all 0.2s linear;
}
:deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__item.is-active) {
  color: rgb(78 168 185);
}
:deep(.el-tabs__active-bar) {
  background-color: rgb(78 168 185) !important;
}
:deep(.el-tabs__item:hover) {
  color: rgb(78 168 185);
}

/* .xiangc li:hover{
  img{
    transition: all .2s linear;
   transform: scale(1.1);
  }
} */

.xiangc li p {
  text-align: center;
  font-size: 16px;
}

.clace {
  padding: 30px;
  width: 1200px;
  margin: auto;
  /* width: 200px;
height: 200px; */
  /* background-color: red; */
}
.serch {
  display: flex;
  align-items: center;
  width: 180px;
}
.header {
  /* position: absolute; */
  /* background-color:rgba(255,255,255,.5); */
  /* position: absolute;  */
  width: 100%;
  z-index: 99999;
  display: flex;
  justify-content: flex-end;
  /* flex-direction: row-reverse; */
  padding: 0px 30px;
  /* background-color: rgb(0, 0, 0,.2); */
}
:deep(.el-sub-menu__title) {
  font-size: 16px;
  color: #fff !important;
}
.bannder {
  margin-left: 50px;

  width: 70%;
}
:deep(.el-menu) {
  background: rgba(0, 0, 0, 0);
}

:deep(.el-menu-item) {
  font-size: 16px;
}
:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
  color: rgb(78 168 185) !important;
  background-color: rgba(0, 0, 0, 0.5);
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(
    .el-menu--horizontal .el-menu .el-menu-item,
    .el-menu--horizontal .el-menu .el-sub-menu__title
  ) {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
:deep(.el-menu-item:hover) {
  color: rgb(78 168 185) !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  color: rgb(78 168 185) !important;
}
.el-menu--horizontal.el-menu {
  border-bottom: 0;
}

:deep(.el-popper) {
  z-index: 99999999999999 !important;
}
</style>
